﻿@{
    var isEmbed = Context?.Request?.Query["embed"].ToString() == "1";
    Layout = isEmbed ? null : "_Layout";
    ViewData["Title"] = "工艺详情";
}

<style>
    .page-header { padding: 10px 5px 6px 5px; background: #fff; }
    .page-header-title { display:inline-block; font-size: 20px; font-weight: 700; color:#111827; }
    .page-header-divider { height: 3px; background: #2b77ff; margin-top: 8px; }
    @@media (max-width: 768px) {
        .page-header-title { font-size: 18px; }
    }
    
    /* 基础信息行样式 */
    .info-row {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .info-row:last-child {
        border-bottom: none;
    }
    
    .info-label {
        min-width: 100px;
        margin: 0;
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }
    
    .info-value {
        flex: 1;
        color: #666;
        font-size: 14px;
    }
</style>
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/js/site.js"></script>
<script src="~/layui/layui.js"></script>
<script src="~/js.cookie.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid" style="padding: 15px 20px;">
    <!-- 卡片一：工艺详情 + 基础信息 -->
    <div class="card" style="border: 1px solid #e5e7eb; box-shadow: none; margin-bottom:16px;">
        <div class="card-header" style="background:#fff;border-bottom:1px solid #e5e7eb;">
            <div class="page-header">
                <span class="page-header-title">工艺详情</span>
                <div class="page-header-divider"></div>
            </div>
        </div>
        <div class="card-body" style="background:#fff;">
            <div style="font-weight:600;margin:5px 0 10px;">基础信息</div>
            <div class="row g-3" style="margin-bottom:10px;">
                <div class="col-md-6">
                    <div class="info-row">
                        <label class="info-label">工艺流程编号：</label>
                        <div id="detailCraftsCode" class="info-value">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-row">
                        <label class="info-label">工艺流程名称：</label>
                        <div id="detailCraftsName" class="info-value">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-row">
                        <label class="info-label">所属部门：</label>
                        <div id="detailDepartment" class="info-value">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-row">
                        <label class="info-label">负责人：</label>
                        <div id="detailResponsibility" class="info-value">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-row">
                        <label class="info-label">状态：</label>
                        <div id="detailStatus" class="info-value">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-row">
                        <label class="info-label">备注：</label>
                        <div id="detailNote" class="info-value">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 卡片二：加工工序列表 -->
    <div class="card" style="border: 1px solid #e5e7eb; box-shadow: none;">
        <div class="card-header" style="background:#fff;border-bottom:1px solid #e5e7eb;">
            <div class="page-header">
                <span class="page-header-title">加工工序</span>
                <div class="page-header-divider"></div>
            </div>
        </div>
        <div class="card-body" style="background:#fff;">
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle" style="margin-bottom:0;">
                    <thead class="table-light">
                        <tr>
                            <th style="width:60px;">序号</th>
                            <th style="width:80px;">工序顺序</th>
                            <th style="width:140px;">工序编码</th>
                            <th>工序名称</th>
                            <th style="width:120px;">负责人</th>
                            <th style="width:120px;">所属部门</th>
                            <th style="width:220px;">备注</th>
                        </tr>
                    </thead>
                    <tbody id="detailProcessTbody">
                        <tr><td colspan="7" class="text-center text-muted">正在加载工序数据...</td></tr>
                    </tbody>
                </table>
            </div>
            <div style="margin-top:12px;">
                <button type="button" class="btn btn-secondary" onclick="history.back()">返回</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        var urlParams = new URLSearchParams(window.location.search);
        var craftsId = urlParams.get('id');
        console.log('详情页 - URL工艺ID:', craftsId);
        
        // 优先使用列表页缓存的数据进行回显
        loadCachedData();
        
        if (craftsId) {
            // 仍然调用接口确保最新数据
            loadCraftsBaseInfo(craftsId);
            loadCraftsProcesses(craftsId);
        } else {
            console.warn('未获取到工艺ID，无法加载详情');
        }
    });

    // 加载缓存的数据
    function loadCachedData() {
        try {
            var cached = sessionStorage.getItem('viewCraftsData');
            console.log('从sessionStorage读取的原始数据:', cached);
            
            if (cached) {
                var craftsData = JSON.parse(cached);
                console.log('从缓存加载的工艺数据:', craftsData);
                console.log('数据类型:', typeof craftsData);
                console.log('数据属性:', Object.keys(craftsData));
                
                // 显示基础信息
                $('#detailCraftsCode').text(craftsData.craftsCode || '-');
                $('#detailCraftsName').text(craftsData.craftsName || '-');
                
                // 处理部门名称
                var departmentName = '';
                if (craftsData.departId == 1) {
                    departmentName = "生产部";
                } else if (craftsData.departId == 2) {
                    departmentName = "质检部";
                } else if (craftsData.departId == 3) {
                    departmentName = "技术部";
                } else {
                    departmentName = craftsData.departId || '-';
                }
                $('#detailDepartment').text(departmentName);
                
                // 显示负责人
                $('#detailResponsibility').text(craftsData.responsibilityName || '-');
                
                // 处理状态显示
                var statusText = '';
                if (craftsData.craftsStatus === false || craftsData.craftsStatus === 0 || craftsData.craftsStatus === '0') {
                    statusText = '启用';
                } else {
                    statusText = '禁用';
                }
                $('#detailStatus').text(statusText);
                
                // 显示备注
                $('#detailNote').text(craftsData.note || '-');
                
                console.log('基础信息已从缓存加载完成');
                console.log('显示的数据:', {
                    craftsCode: $('#detailCraftsCode').text(),
                    craftsName: $('#detailCraftsName').text(),
                    department: $('#detailDepartment').text(),
                    responsibility: $('#detailResponsibility').text(),
                    status: $('#detailStatus').text(),
                    note: $('#detailNote').text()
                });
            } else {
                console.log('未找到缓存的工艺数据');
            }
        } catch(e) { 
            console.error('解析缓存详情数据失败:', e); 
            console.error('错误详情:', e.message);
            console.error('错误堆栈:', e.stack);
        }
    }

    function loadCraftsBaseInfo(craftsId) {
        $.ajax({
            url: 'http://localhost:5161/api/Process/CraftsQuery',
            type: 'GET',
            dataType: 'json',
            data: { id: craftsId },
            success: function(res) {
                console.log('详情页-基础信息响应:', res);
                if (res && res.code === 200 && res.data && res.data.list && res.data.list.length > 0) {
                    var d = res.data.list[0];
                    console.log('从接口获取的工艺数据:', d);
                    
                    // 更新基础信息显示
                    $('#detailCraftsCode').text(d.craftsCode || '-');
                    $('#detailCraftsName').text(d.craftsName || '-');
                    
                    // 处理部门名称
                    var departmentName = '';
                    if (d.departId == 1) {
                        departmentName = "生产部";
                    } else if (d.departId == 2) {
                        departmentName = "质检部";
                    } else if (d.departId == 3) {
                        departmentName = "技术部";
                    } else {
                        departmentName = d.departId || '-';
                    }
                    $('#detailDepartment').text(departmentName);
                    
                    $('#detailResponsibility').text(d.responsibilityName || '-');
                    
                    // 映射状态：false/0=启用，true/1=禁用
                    var statusText = (d.craftsStatus === false || d.craftsStatus === 0 || d.craftsStatus === '0') ? '启用' : '禁用';
                    $('#detailStatus').text(statusText);
                    
                    $('#detailNote').text(d.note || '-');
                    
                    console.log('基础信息已从接口更新完成');
                } else {
                    console.warn('接口返回的数据格式不正确或为空');
                }
            },
            error: function(xhr) {
                console.error('加载基础信息失败:', xhr.responseText);
            }
        });
    }

    function loadCraftsProcesses(craftsId) {
        var tbody = $('#detailProcessTbody');
        tbody.html('<tr><td colspan="7" class="text-center text-muted">正在加载工序数据...</td></tr>');
        
        $.ajax({
            url: 'http://localhost:5161/api/Process/ProcessCratfs',
            type: 'GET',
            dataType: 'json',
            data: { craftsId: craftsId },
            success: function(res) {
                console.log('详情页-工序列表响应:', res);
                if (res && res.code === 200 && res.data && res.data.length > 0) {
                    var rowsHtml = '';
                    res.data.forEach(function(p, idx) {
                        var code = p.processCode || p.code || '-';
                        var name = p.processName || p.name || '-';
                        var resp = p.responsibilityName || p.responsibility || '-';
                        
                        // 处理部门名称显示
                        var dept = '';
                        var deptId = p.departId || p.departmentId;
                        if (deptId == 1) {
                            dept = "生产部";
                        } else if (deptId == 2) {
                            dept = "质检部";
                        } else if (deptId == 3) {
                            dept = "技术部";
                        } else {
                            dept = p.departName || p.department || '-';
                        }
                        
                        var note = p.note || p.remark || '-';
                        
                        rowsHtml += '<tr>' +
                            '<td>' + (idx + 1) + '</td>' +
                            '<td>' + (idx + 1) + '</td>' +
                            '<td>' + code + '</td>' +
                            '<td>' + name + '</td>' +
                            '<td>' + resp + '</td>' +
                            '<td>' + dept + '</td>' +
                            '<td>' + note + '</td>' +
                        '</tr>';
                    });
                    tbody.html(rowsHtml);
                    console.log('工序列表加载完成，共' + res.data.length + '条数据');
                } else {
                    tbody.html('<tr><td colspan="7" class="text-center text-muted">暂无工序数据</td></tr>');
                    console.log('工序列表为空');
                }
            },
            error: function(xhr) {
                console.error('加载工序列表失败:', xhr.responseText);
                tbody.html('<tr><td colspan="7" class="text-center text-danger">加载失败</td></tr>');
            }
        });
    }
</script>

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
